<!doctype html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" media="screen" href="../lib/chosen/1.2.0/chosen.css">
		<style>
			#states-select, #states-multi-select { width: 150px; }
		</style>
	</head>
	<body>
		<p>Type one of the 50 states to begin</p>
		<h2>Single Select</h2>
		<select id="states-select" name="states-select">
			<option value=""></option>
		</select>
		<h2>Multi Select</h2>
		<select id="states-multi-select" name="states-multi-select" multiple>
			<option value=""></option>
		</select>

		<script type="text/javascript" src="../lib/jquery/1.11.0/jquery.js"></script>
		<script type="text/javascript" src="../lib/chosen/1.2.0/chosen.jquery.js"></script>
		<script type="text/javascript" src="../lib/chosen/1.2.0/chosen.ajaxaddition.jquery.js"></script>
		<script>
           $('#states-select').ajaxChosen({
                   dataType: 'json',
                   type: 'POST',
                   url:'data.json'
           },{
                   loadingImg: 'loading.gif'
           });
           $('#states-multi-select').ajaxChosen({
                   dataType: 'json',
                   type: 'POST',
                   url:'data.json'
           },{
                   loadingImg: 'loading.gif'
           });
    </script>
	</body>
</html>
